<!--
 * @Descripttion: 管控人员
 * @version: 
 * @Author: wl
 * @Date: 2020-05-21 17:00:50
 * @LastEditors: wl
 * @LastEditTime: 2020-05-23 17:22:25
--> 
<template>
  <div>
    <page :asideShow="asideShow">
      <div slot="toolbar">
        <el-form :inline="true" :model="filters" label-position="right">
          <el-form-item label="布控原因：">
            <div>
              <el-select clearable v-model="typesearch" placeholder="布控原因" @change="handleQuery">
                <el-option
                  v-for="item in options"
                  :key="item.typesearch"
                  :label="item.label"
                  :value="item.typesearch"
                ></el-option>
              </el-select>
              <template>
                <unit-tree-data v-if="unitShow" @click="handleTreeClick" class="stat-search-box"></unit-tree-data>
              </template>
            </div>
          </el-form-item>
          <el-form-item label="姓名：">
            <el-input class="normal" placeholder="请输入" clearable v-model="filters.username" @keydown.enter.native="handleQuery"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="btnSearch">
        <el-button @click="handleQuery('a')">查询</el-button>
      </div>
      <div slot="content">
        <el-table
        :header-cell-style="{ background: '#e7eaf0', color: '#606266' }"
          v-loading="loading"
          element-loading-text="加载中..."
          :data="this.contrlList"
          style="width: 100%;margin-bottom: 20px;"
        >
          <el-table-column prop="pic" label="人像" width="100" align="center">
            <template slot-scope="scope">
              <img
                :src="scope.row.pic ? scope.row.pic : ''"
                alt
                v-image-preview
                style="width: 50px; height: 50px;"
              />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" align="center" width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.name">{{ scope.row.name }}</span>
              <span v-if="!scope.row.name">未知</span>
            </template>
          </el-table-column>
          <el-table-column prop="sex" label="性别" align="center" width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.sex == 1">女</span>
              <span v-if="scope.row.sex == 2">男</span>
              <span v-if="!scope.row.sex">未知</span>
            </template>
          </el-table-column>
          <el-table-column prop="card" label="身份号" align="center" width="200"></el-table-column>
          <el-table-column prop="frequency" label="抓拍次数" align="center" width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.frequency">{{ scope.row.frequency }}</span>
              <span v-if="!scope.row.frequency">0</span>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="布控原因" align="center" width="200">
            <template slot-scope="scope">
              <span v-if="scope.row.type">{{scope.row.type}}</span>

              <span v-if="!scope.row.type">未知</span>
            </template>
          </el-table-column>
          <el-table-column prop="grade" label="布控等级" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.grade">{{ scope.row.grade}}</span>
              <span v-if="!scope.row.grade">未知</span>
            </template>
          </el-table-column>
          <el-table-column prop="time" label="布控时长" align="center" width="250">
            <template slot-scope="scope">
              <span v-if="scope.row.time">{{ scope.row.time }}</span>
              <span v-if="!scope.row.time">未知</span>
            </template>
          </el-table-column>
          <el-table-column align="center" width="250" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="xiangqing(scope.$index, scope.row)">查看</el-button>
              <el-button size="mini" type="text" @click="deletePer(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer">
        <el-pagination
          layout="total, prev, pager, next, jumper"
          @current-change="refreshPageRequest"
          :current-page="pageRequest.page"
          :page-size="pageRequest.pageSize"
          :total="totalSize"
          style="float:right;"
        ></el-pagination>
      </div>
    </page>
  </div>
</template>

<script>
export default {
  data() {
    return {
      asideShow: false,
      unitShow: false,
      pageResult: [],
      filters: {
        corpId: 0,
        corpName: "",
        username: "",
        startTime: "",
        endTime: ""
      },
      pageRequest: {
        page: 1,
        pageSize: 10
      },
      columns: [],
      loading: false,
      totalSize: 0,
      exportUrl: this.global.baseUrl + "/self_test_stat/export",
      exportLoading: false,
      // 查询布控原因
      options: [
        {
          typesearch: "1",
          label: "潜逃人员"
        },
        {
          typesearch: "2",
          label: "重点保护"
        },
        {
          typesearch: "3",
          label: "吸毒人员"
        },
        {
          typesearch: "4",
          label: "抓捕对象"
        },
        {
          typesearch: "5",
          label: "其他"
        }
      ],
      // 布控原因
      typesearch: "",
      // 人控列表
      contrlList: [],
      // avatar:require("")
    };
  },
  mounted() {
 
  },
  methods: {
  
    // 查询
    handleQuery(val){},
    // 翻页
    refreshPageRequest(val) {
      this.pageRequest.page = val;
      this.getList(this.pageRequest.page, this.pageRequest.pageSize);
    }
  }
};
</script>

<style>
</style>